<template>
  <el-drawer :title="$attrs.dialogType==`add`?`添加规则`:`编辑规则`" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body size="750px">
    <div class="drawer-body">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="规则名称" prop="materialUrl" v-if="$attrs.dialogType==`add`">
          <el-input v-model="form.type_name" placeholder="请输入素材分类" maxlength="15" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="生效企业" prop="materialUrl" v-if="$attrs.dialogType==`edit`">
          安徽志新科技有限公司
        </el-form-item>
        <el-form-item label="触发对象" prop="budget_type">
          <el-radio-group v-model="form.budget_type" class="budget_type">
            <el-radio :label="Number(item.value)" v-for="(item,index) in budgetTypeList" :key="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="触发关键词" prop="keyword">
          <el-radio-group v-model="form.budget_type" class="budget_type">
            <el-radio :label="Number(item.value)" v-for="(item,index) in budgetTypeList" :key="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="触发关键词" prop="keyword">
          <div class="select-big">
            <el-select v-model="form.istype" placeholder="请选择" class="select-left">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-input placeholder="可输入多个，按enter确认" v-model="input3" class="select-right" @keyup.enter.native="handleQuery">
              <el-button slot="append" icon="el-icon-plus" @click="handleQuery"></el-button>
            </el-input>
          </div>
          <div class="label-list">
            <span>一般 <i class="el-icon-close"></i></span>
            <span>重要 <i class="el-icon-close"></i></span>
            <span>核心<i class="el-icon-close"></i></span>
          </div>
        </el-form-item>
        <el-form-item label="企微标签" prop="label3">
          <div class="label-list">
            <span>一般 <i class="el-icon-close"></i></span>
            <span>重要 <i class="el-icon-close"></i></span>
            <span>核心<i class="el-icon-close"></i></span>
            <el-button plain @click="handerTableLabel" size="small">选择企微标签</el-button>
          </div>

        </el-form-item>
        <el-form-item label="智能标签" prop="label4">
          <div class="label-list">
            <span>一般 <i class="el-icon-close"></i></span>
            <span>重要 <i class="el-icon-close"></i></span>
            <span>核心<i class="el-icon-close"></i></span>
            <el-button plain @click="handleSelectSmartTags" size="small">选择智能标签</el-button>
          </div>

        </el-form-item>

      </el-form>
    </div>

    <div class="drawer-footer">
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary" @click="handleSave('ruleForm')">
        <template v-if="$attrs.dialogType==`add`">上传</template>
        <template v-else>提交</template>
      </el-button>
    </div>
    <tableLabel v-if="showTableLabel" :visableIf.sync="showTableLabel"></tableLabel>
    <!-- 智能标签-->
    <selectSmartTags v-if="showSelectSmartTags" :visableIf.sync="showSelectSmartTags"></selectSmartTags>
  </el-drawer>

</template>

<script>
// import {reqGetOriginalDetailsById, reqAddOriginality, reqEditOriginality} from '@/api/originalityMgt/index';

export default {
  name: "addOrEditRule",
  components: {
    'tableLabel': () => import('@/views/customerOperationsMgt/customerMgt/tableLabel.vue'),//打开企微标签
    'selectSmartTags': () => import('@/views/customerOperationsMgt/customerMgt/selectSmartTags.vue'),//打开企微标签

  },
  data() {
    return {

      showTableLabel: false,//企微标签
      showSelectSmartTags:false,
      input3: null,//关键词的代码
      form: {
        type_name: null,//素材分类
        budget_type: null,//触发企业
        keyword: null,//触发关键词
        istype: null,
        label3:null,// 企微标签
        label4:null,//智能标签
      },
      typeList: [
        {
          label: '满足任意一个',
          value: 0,
        },
        {
          label: '同时满足所有',
          value: 1,
        }
      ],
      budgetTypeList: [
        {
          label: '私聊仅客户触发',
          value: 0,
        },
        {
          label: '私聊双方都触发',
          value: 1,
        }
      ],//
      keyWordTypeList: [
        {
          label: '模糊关键词',
          value: 0,
        },
        {
          label: '精准关键词',
          value: 1,
        }
      ],//广告组预算
      rules: {
        param: [
          {required: true, message: '请添加素材', trigger: 'blur'},
        ],
        type_name: [
          {required: true, message: '请输入素材分类', trigger: 'blur'},
        ],

      },
    }
  },
  created() {
    if (this.$attrs.dialogType == 'edit') {
      this.form.type_name = this.$attrs.editImageList[0].type_name;//获取素材分类
    }
  },
  methods: {
    handleQuery() {

    },
    handleSelectSmartTags() {
      //打开智能标签
      this.showSelectSmartTags = true;
    },
    handerTableLabel() {
      this.showTableLabel = true;
      console.log('点击了打开标签',this.showTableLabel);
    },
    handleSave(form) {
      //提交的代码
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log('form里的值', this.form);
          let axiosUrl = '';
          let form = null;
          if (this.$attrs.dialogType == `add`) {
            //调用添加接口
            axiosUrl = reqAddOriginality;
            this.form.param = JSON.stringify(this.form.param);
            form = JSON.parse(JSON.stringify(this.form));
          } else {
            axiosUrl = reqEditOriginality;//单个编辑和批量编辑使用批量编辑的接口
            //编辑和批量编辑的接口调用
            let ids = [];//获取id
            this.$attrs.editImageList.forEach(item => {
              ids.push(item.id);
            });
            form = {
              type_name: this.form.type_name,
              ids: ids,
            }
          }
          axiosUrl(form).then(res => {
            this.$emit("getList");
            this.$modal.msgSuccess(res.msg);
            this.handleCloseDialog();//关闭窗口
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit("handleCloseFilter"); //关闭弹窗;
    },
  }
}
</script>

<style scoped lang="scss">
.el-form {
  ::v-deep .el-form-item {
    .el-form-item__label {

    }

    .el-form-item__content {
      .el-input__inner {
        border-radius: 0px;
        height: 32px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #BEBEBE;
        line-height: 32px;
      }
    }
  }

  .imagesList {
    display: flex;
    flex-wrap: wrap;

    li {
      list-style: none;
      height: 120px;
      width: 150px;
      margin-right: 10px;
      position: relative;
      margin-bottom: 10px;
      border-radius: 5px;
      border: 1px solid #eee;

      &:hover {
        .top-icon {
          display: flex;
        }
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .top-icon {
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100%;
        top: 0px;
        // display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        display: none;

        i {
          margin: 0px 10px;
          color: #fff;
          font-size: 20px;
          cursor: pointer;

        }

        &:after {
          position: absolute;
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.7;
          left: 0px;
          content: '';
          z-index: -1;
        }
      }
    }
  }
}

::v-deep .el-drawer {
  .drawer-body {
    overflow-y: auto;
    padding: 20px 20px;
  }

  .drawer-footer {
    position: absolute;
    width: 100%;
    height: 50px;
    background: #eee;
    bottom: 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 20px;
    box-sizing: border-box;

    .el-button--medium {
      padding: 5px 20px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.label-list {
  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
  }

  i {
    cursor: pointer;

  }

  span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #f0f0f0;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-block;

  }
}
.select-big {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 30px;
  margin-bottom: 30px;
  .select-left {
    width: 150px;
    margin-right: 10px;
  }
  .select-right{
    flex: 1;
  }
}

</style>
